<template>
    <div class="pagefile_layout" ref="pagefile" >
         <section class="el-container is-vertical file-container">
            <section class="el-container file-box">
                <aside class="el-aside file-left" :style="menuBG">
                    <div class="normal_btn">
                        開檔
                    </div>
                    <div class="normal_btn" @click="showMenuDialog = true">
                        新建
                    </div>
                </aside> 
                <section class="el-container is-vertical file-center">
                    <main class="el-main file-main" :style="mainBG">
                        <div class="normal_btn">
                            開檔
                        </div>
                        <div class="normal_btn">
                           <router-link to="/graphicfile"> 新建</router-link>
                        </div>
                    </main> 
                    <footer class="el-footer file-footer"  :style="footerBG">
                        <div class="normal_btn">
                            開檔
                        </div>
                        <div class="normal_btn">
                            新建
                        </div>
                    </footer>
                </section> 
            </section>
        </section>
        <el-dialog
        title="頁面檔功能菜單"
        :visible.sync="showMenuDialog"
        width="30%"
        center>
        <div class="fun_menu_box">
           <div class="menu_tree">
               <el-tree
               v-if="menuData.length >0"
                :data="menuData"
                :props="defaultProps"
                accordion
                :expand-on-click-node="false"
                show-checkbox
                node-key="id"
                default-expand-all
                 :render-content="renderContent"
                @node-click="handleNodeClick">
                </el-tree>
                <div v-else>
                    <el-button type="primary" plain @click="append">新建菜單</el-button>
                </div>
                <div class="add_menu_form" v-show="showAdd">
                    <el-divider></el-divider>
                    <div class="form_box">
                        <el-form ref="form" :model="addMenuForm" label-width="80px">
                            <el-form-item label="菜單名稱">
                                <el-input v-model="addMenuForm.name"></el-input>
                            </el-form-item>
                        </el-form>
                        <div class="dialog-footer">
                            <el-button @click="showAdd = false">取 消</el-button>
                            <el-button type="primary" @click="addChild">添加</el-button>
                        </div>
                    </div>
                </div>
           </div>
        </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    computed:{
        pageJson:function(){
            return  this.$store.state.design.pageJson;
        },
        globalUI:function(){
            return this.$store.getters.getCurStyle;
        },
        menuBG:function(){
            let img = 'url('+require('../../assets/UI/'+this.globalUI.styleType+'/page_menu_bg.png')+')no-repeat center/100% 100%';
            let bgStyle={'background':img, 'background-repeat':'no-repeat'}
            return bgStyle
        },
        mainBG:function(){
            let img = 'url('+require('../../assets/UI/'+this.globalUI.styleType+'/page_main_bg.png')+')no-repeat center/100% 100%';
            let bgStyle={'background':img, 'background-size':'100% 100%'}
            return bgStyle
        },
        footerBG:function(){
            let img = 'url('+require('../../assets/UI/'+this.globalUI.styleType+'/page_warn_bg.png')+')no-repeat center/100% 100%';
            let bgStyle={'background':img, 'background-size':'100% 100%'}
            return bgStyle
        }
    },
    mounted(){
        let bodyHei = document.body.clientHeight;
        let containerW = this.$refs.pagefile.clientWidth;
        let  pageStyle = this.$store.state.design.pageJson;
        let curStyle = {};
        Object.keys(pageStyle).forEach( item =>{
            switch (item){
                 case 'header':{
                    curStyle['container'] = {
                        height:((100-pageStyle.header.heiper)*bodyHei/100).toFixed(2)+'px',
                        width:'100%',
                    }
                    break;
                }
                case 'footer':{
                    let containerHei = (100-pageStyle.header.heiper)*bodyHei/100;
                    curStyle['footer'] = {
                        height: (containerHei*pageStyle.footer.heiper/100).toFixed(2)+'px',
                        width:containerW+'px',
                    }
                    break;
                }
                case 'main':{
                    let containerHei = (100-pageStyle.header.heiper)*bodyHei/100;
                    curStyle['main'] = {
                        height: (containerHei*pageStyle.main.heiper/100).toFixed(2)+'px',
                        width:(containerW*pageStyle.main.widper/100).toFixed(2)+'px',
                    }
                    break;
                }
                case 'left':{
                    curStyle['left'] = {
                        height: '100%',
                        width:(containerW*pageStyle.left.widper/100).toFixed(2)+'px',
                    }
                    break;
                }
                case 'right':{
                    curStyle['right'] = {
                        height: '100%',
                        width:(containerW*pageStyle.right.widper/100).toFixed(2)+'px',
                    }
                    break;
                }
            }
        })
        this.curStyle = curStyle;
    },
    data(){
        return {
            showAdd:false,
            showMenuDialog:false,
            curStyle:{
                'container':{},
                'left':{},
                'main':{},
                'footer':{},
                'main':{},
                'right':{}
            },
            addMenuForm:{
                name:''
            },
            menuData: [{
                id:'all',
                label:'菜單檔',
                children:[
                ]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tempdata:{}
        }
    },
    methods:{
        handleNodeClick(data) {
            console.log(data);
        },
        renderContent(h, { node, data, store }) {
            return (
            <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
                <span>
                <span>{node.label}</span>
                </span>
                <span>
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>新增子集</el-button>
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
                </span>
            </span>);
        },
        append(data) {
            let menuData = this.menuData;
            this.showAdd = true;
            if(menuData.length == 0){
                this.menuData = [{
                    id:'all',
                    label:'菜單檔',
                    children:[]
                }]
                this.tempdata = {
                    id:'SYSTE_01',
                    label: '',
                    children:[]
                };
            }else{
                this.tempdata = data;
            }            
        },
        addChild(){
            let data = this.tempdata;
            let label = this.addMenuForm.name;
            let menuData = this.menuData;
            let len = this.menuData[0].children.length;
            let id = 'SYSTE_'+len<10?('0'+len):len
            const newChild = { id,label, children: [] };
            if (!data.children) {
            this.$set(data, 'children', []);
            }
            data.children.push(newChild);
            this.tempdata = {};
            this.$set(this.addMenuForm,'name','')
            this.showAdd = false;
        },
        remove(node, data) {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
        },

    }
}
</script>
<style scoped>
.pagefile_layout{
     width:100%;
    height:100%;
    padding:20px 15px 10px 10px;
    box-sizing: border-box;
}
.file-container{
    width:100%;
    height:100%;
}
.file-left{
    width:250px;
    /* background:url('../../assets/images/page_menu_bg.png')no-repeat center/100%; */
    background-size:100% 100%;
    margin-right:10px;
    box-sizing: border-box;
}
.file-main{
    /* background:url('../../assets/images/page_main_bg.png')no-repeat center/100%; */
    background-size:100% 100%;
}
.file-footer{
    /* background:url('../../assets/images/page_warn_bg.png')no-repeat center/100%; */
    background-size:100% 100%;
    height: 206px;
    margin-top:10px;
    box-sizing: border-box;
}
.normal_btn{
    width:150px;
    padding:15px 25px;
    background-color: rgba(30,49,90,0.8);
    color:#fff;
    font-size: 18px;
    border:2px solid #b8dcff;
    box-shadow: 2px 2px 15px #b8dcff inset;
    border-radius: 3px;
    margin:10px auto;
    cursor: pointer;
}
.normal_btn a{
    text-decoration: none;
     color:#fff;
}
/**添加菜單彈框 */
.fun_menu_box{
    padding: 10px 20px;
}
.form_box{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
</style>